<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 13:30:57
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-11-30 09:41:56
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractFileSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同预览 -->
<template>
  <div v-if="previewData.data.length > 0">
    <a-layout>
      <a-layout>
        <a-layout-sider
          style="width: 206px; margin-left: 1px"
          class="left"
          collapsible
        >
          <header>合同文件</header>
          <a-divider />
          <section>
            <div class="title">
              <div
                @click="fileClick(0)"
                class="item"
                :class="currFileIndex === 0 ? 'item-select' : ''"
              >
                1、{{ previewData.data[currUserIndex]?.[0]?.name }}
              </div>
            </div>
            <a-divider />
          </section>
          <header>其他附件</header>
          <a-divider />
          <section>
            <div
              class="title"
              v-for="(item, index) in previewData.data[currUserIndex]"
              :key="index"
            >
              <div
                @click="fileClick(index)"
                class="item"
                :class="currFileIndex === index ? 'item-select' : ''"
                v-if="index > 0"
              >
                {{ +index + 1 }}、{{ item?.name }}
              </div>
            </div>
            <a-divider />
          </section>
        </a-layout-sider>
        <a-layout-content class="main">
          <div
            v-html="previewData.data[currUserIndex][currFileIndex].text"
          ></div>
        </a-layout-content>
        <a-layout-sider style="width: 150px" class="right">
          <a-input placeholder="搜索人员" v-model="searchVal" />
          <section>
            <div class="m-5">已选择人员({{ formData.userData.length }})</div>
            <a-space direction="vertical" fill>
              <a-radio-group @change="userChange" v-model="currUserIndex">
                <a-radio
                  v-for="(item, index) in userSearchList"
                  :key="item.id"
                  :value="index"
                >
                  <template #radio="{ checked }">
                    <a-tag
                      style="width: 100%"
                      size="large"
                      :class="{ 'custom-radio-card-checked': checked }"
                      :checked="checked"
                      class="custom-radio-card"
                      checkable
                      >{{ item.name }}</a-tag
                    >
                  </template>
                </a-radio>
              </a-radio-group>
            </a-space>
          </section>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { GetBusinessModalData } from '@/apis/controltotal';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const formData = useVModel(props, 'data', emit);

let previewData = reactive({
  data: []
});
let currUserIndex = ref(0); // 判断用户点击哪个人员的索引
let currFileIndex = ref(0); // 文件索引
watch(
  () => props.data.preViewData,
  (newVal: any) => {
    if (newVal) {
      previewData.data = newVal;
      currUserIndex.value = 0;
      currFileIndex.value = 0;
    }
  },
  {
    deep: true
  }
);

let searchVal = ref('');
const userSearchList = computed(() => {
  return formData.value.userData.filter((item: any) =>
    item.name.includes(searchVal.value)
  );
});

// 点击左边文件栏
const fileClick = (index: number) => {
  currFileIndex.value = index;
};

// 点击变换人员
const userChange = (val: number) => {
  currFileIndex.value = 0;
};
</script>

<style lang="less" scoped>
.left {
  header {
    font-size: 16px;
    font-weight: 700;
    height: 28px;
    line-height: 28px;
    &::before {
      margin-left: 10px;
      content: '';
      display: inline-block;
      width: 6px;
      height: 20px;
      margin-right: 10px;
      background: #165dff;
      position: relative;
      top: 5px;
      border-radius: 3px;
    }
  }
  section {
    // 文字太长显示省略号，并且不换行
    .title {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;

      .item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;

        &-select {
          background-color: #eee;
        }
        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}

.main {
  margin: 0 20px;
  .page {
    page-break-after: always;
  }
}

.right {
  .custom-radio-card {
    background-color: #fff;
  }
  .custom-radio-card:hover,
  .custom-radio-card-checked {
    border-color: rgb(var(--primary-6));
  }
}

:deep(.arco-radio-group .arco-radio) {
  margin: 0;
  width: 100%;
}
</style>
